<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
            <el-form-item label="修改时间范围">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="文档名称" prop="docName">
                <el-input
                    v-model="queryParams.docName"
                    placeholder="请输入文档名称"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-upload2"
                    size="mini"
                    @click="handleImport"
                >导入
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="docList" key="id">
            <el-table-column type="index" label="序号" width="55" >
                <template slot-scope="scope">
                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="文档名称" align="center" prop="docName"></el-table-column>
            <el-table-column label="类型" align="center" prop="docType"></el-table-column>
            <el-table-column label="修改时间" align="center" prop="operationTime"></el-table-column>
            <el-table-column label="版本" align="center" prop="version"></el-table-column>
            <!----  需求库是0 在出入库界面直接上传的文件
                    过程库是1 在文档管理界面发布的
                    发布库是2 点击发布后发布的版本--->
            <el-table-column label="入库状态" align="center" prop="storageType">
                <template slot-scope="scope">
                    <span v-if="scope.row.storageType === 0">需求库</span>
                    <span v-if="scope.row.storageType === 1">过程库</span>
                    <span v-if="scope.row.storageType === 2">发布库</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                    <el-button type="text" :disabled="scope.row.storageType === 2" @click="handlePublish(scope.row,scope.$index)">发布</el-button>
                    <el-button type="text" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <!---查看编辑弹框--->
        <el-dialog
            title="编辑版本信息"
            :visible.sync="versionOpen"
            width="400px"
            append-to-body
            @close="closeVersion"
            :close-on-click-modal="false">
            <el-form
                ref="versionFormRef" :model="versionForm" :rules="versionRules" label-width="80px">
                <el-form-item label="名称" prop="docName">
                    {{versionForm.docName}}
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input v-model="versionForm.version"></el-input>
                </el-form-item>
                <el-form-item label="格式" prop="docType">
                    {{versionForm.docType}}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitVersionForm">确 定</el-button>
                <el-button @click="versionOpen = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-----导入------->
        <el-dialog title="上传文档" :visible.sync="uploadOpen" width="400px" append-to-body>
            <el-upload
                ref="uploadDoc"
                :limit="1"
                accept=".doc, .pdf, .docx"
                :action="upload.url"
                :file-list="file"
                :headers="upload.headers"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :on-change="changeFile"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <span>仅允许导入doc、docx、pdf格式文件。</span>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="uploadOpen = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script >
import outInDoc from "@/views/compare/outInDoc.vue";
import {delCompareLog, getDocList,outInImportFiles,delDoc, publishDoc} from "@/api/compare";
import {getToken} from "@/utils/auth";

export default {
    computed: {
        outInDoc() {
            return outInDoc
        }
    },
    data() {
        return {
            dateRange:[],
            total:2,
            queryParams:{
                docName:'',
                pageNum:1,
                pageSize:10,
            },
            loading:false,
            docList:[
                // {
                //     docName:'电子围栏系统方案(标准)',
                //     docType:'pdf',
                //     version:'V1.0',
                //     updateTime:'2024-08-10 10:29:34',
                //     state:'需求库'
                // },
                // {
                //     docName:'电子围栏系统方案(new)',
                //     docType:'pdf',
                //     version:'V1.0',
                //     updateTime:'2024-11-20 12:34:11',
                //     state:'过程库'
                // }
            ],
            titleTxt:'',
            versionOpen:false,
            versionForm:{
                docName:'',
                version:'',
                docType:'',
            },
            versionRules:{
                version:[{required:true,message:'版本不可为空',trigger:'blur'}]
            },
            uploadOpen:false,
            upload: {
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/basics/upload/mainFile"
            },
            file:null,
        }
    },
    mounted() {
        this.handleQuery();
    },
    methods: {
        handleQuery(){
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery(){
          this.dateRange = [];
          this.resetForm("queryForm");
          this.handleQuery();
        },
        getList(){
            this.docList = [];
            getDocList(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
                this.docList = res.rows;
                this.total = res.total;
            })
            //this.addDateRange(this.queryParams, this.dateRange)
        },
        //修改版本信息
        handleVersion(row){
            this.versionOpen = true;
            // this.versionForm = JSON.parse(JSON.stringify(row));
            this.versionForm = row;
        },
        //关闭版本弹框
        closeVersion(){
            // this.$refs.versionFormRef.resetFields();
            this.versionOpen = false;
        },
        submitVersionForm(){
            this.$refs["versionFormRef"].validate(valid => {
                if(valid){
                    this.versionOpen = false;
                }
            })
        },
        //导入
        handleImport(){
            this.uploadOpen = true;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.isUploading = false;
            this.uploadSuccess();
        },
        //文件上传成功
        uploadSuccess(){
            this.uploadOpen = false;
            this.$refs.uploadDoc.clearFiles();
            this.$modal.msgSuccess("导入成功");
            this.getList();
        },
        //变更文件，判断是否可以上传文件
        changeFile(file,fileList){
            console.log(file);
            this.file = file;
            console.log(fileList);
        },
        // 提交上传文件
        submitFileForm() {
            // this.$refs.uploadDoc.submit();
            this.param = new FormData();
            this.param.append('file',this.file.raw);
            outInImportFiles(this.param).then(res=>{
                this.handleFileSuccess();
            })
        },
        //查看
        handleView(row){
            this.$router.push({
                path:'/compare/viewDoc',
                query:{
                    sourceFileMountPath:row.docPath,
                    type:'onlyView',
                    sourceFileId:row.id,   //源文件
                }
            })
        },
        //发布
        handlePublish(row,index){
            let _this = this;
            let _docList = JSON.parse(JSON.stringify(this.docList));
            this.$modal.confirm('是否确认发布该条信息？').then(function () {
                return publishDoc({id:row.id})
                // _docList[index].state = '发布库';
                // _this.docList = _docList;docList[index].state = '发布库';
                // _this.docList = _docList;
            }).then(() => {
                _this.$modal.msgSuccess("发布成功");
                _this.getList();
            }).catch(() => {

            });
        },
        //删除
        handleDelete(row,index){
            let _this = this;
            this.$modal.confirm('是否确认删除该条信息？').then(function () {
                // _this.docList.splice(index,1);
                return delDoc(row.id)
            }).then(() => {
                _this.$modal.msgSuccess("删除成功");
                _this.getList();
            }).catch(() => {

            });

        }
    }
}
</script>
<style scoped lang="scss">

</style>
